<template>
    <el-drawer class="cust-drawer" v-model="drawer2" :direction="direction">
        <template #header>
            <div>{{ props.title }}</div>
        </template>
        <template #default>

            <div v-if="props.code === 'date'" class="date">
                <div class="item">
                    赛事开始时间： <el-date-picker v-model="date.minDate" type="date" placeholder="  请选择" />
                </div>
                <div class="item">
                    赛事结束时间： <el-date-picker v-model="date.maxDate" type="date" placeholder="请选择" />
                </div>
                <div class="ok_btn"><el-button @click="submitDate" type="primary">查询</el-button> </div>
            </div>
            <div v-else>
                <slot></slot>
            </div>
        </template>
    </el-drawer>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref, reactive } from 'vue'
const emit = defineEmits(["getDateVal"])
const date = reactive({
    minDate: "",
    maxDate: ""
})
const drawer2 = ref(false)
const direction = ref('btt')

const props = defineProps({
    title: {
        type: String,
        default: ""
    },
    code: {
        type: String,
        default: ""
    }
});

function open() {
    drawer2.value = true;
}
function close() {
    drawer2.value = false;
}
const submitDate=()=>{
    // if(date.minDate==""){
    //     ElMessage.warning("未选择开始日期");
    //     return;
    // }
    // if(date.minDate==""){
    //     ElMessage.warning("未选择结束日期");
    //     return;
    // }
    close();
	emit("getDateVal",{
        minDate:date.minDate,
        maxDate:date.maxDate,
    });


}
defineExpose({
    open,
    close
})
</script>
<styele lang="scss">
.cust-drawer {
    padding: 0px;
    margin-bottom: 0px;
    height: auto !important;

    .el-drawer__header {
        padding: 2rem .5rem 1.5rem 1.5rem;
        color: #333;
        margin: 0px;
        font-size: 1.8rem
    }

    .el-drawer__body {
        padding: 0px 1.5rem;
        max-height: 30rem;
        overflow-y: auto;
    }

    .date {
        padding-bottom: 1.5rem;

        .item {
            margin-bottom: 1.5rem;

            .el-date-editor {
                width: 100%;
                margin-top: .5rem;
            }
        }

        .ok_btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: .5rem;
            .el-button{
                margin: auto;
            }
        }
    }
}
</styele>